<template>
	<el-dialog title="实名认证详情" v-model="dialogVisible" :width="900" :close-on-click-modal="false" @close="closed">
		<div v-loading="loading" class="verification-detail">
			<el-row :gutter="20" v-if="verificationInfo">
				<!-- 基本信息 -->
				<el-col :span="12">
					<el-card class="info-card">
						<template #header>
							<div class="card-header">
								<i class="el-icon-user"></i>
								<span>基本信息</span>
							</div>
						</template>
						<div class="info-item">
							<label>认证ID：</label>
							<span>{{ verificationInfo.id }}</span>
						</div>
						<div class="info-item">
							<label>租户ID：</label>
							<span>{{ verificationInfo.tenant_id }}</span>
						</div>
						<div class="info-item">
							<label>认证类型：</label>
							<el-tag :type="verificationInfo.verification_type === 'personal' ? 'primary' : 'success'">
								{{ verificationInfo.verification_type === 'personal' ? '个人认证' : '企业认证' }}
							</el-tag>
						</div>
						<div class="info-item">
							<label>真实姓名：</label>
							<span>{{ verificationInfo.real_name }}</span>
						</div>
						<div class="info-item">
							<label>身份证号：</label>
							<span>{{ verificationInfo.id_card }}</span>
						</div>
						<div class="info-item">
							<label>联系电话：</label>
							<span>{{ verificationInfo.contact_phone }}</span>
						</div>
						<div class="info-item">
							<label>联系地址：</label>
							<span>{{ verificationInfo.contact_address || '未填写' }}</span>
						</div>
					</el-card>
				</el-col>

				<!-- 企业信息 -->
				<el-col :span="12" v-if="verificationInfo.verification_type === 'enterprise'">
					<el-card class="info-card">
						<template #header>
							<div class="card-header">
								<i class="el-icon-office-building"></i>
								<span>企业信息</span>
							</div>
						</template>
						<div class="info-item">
							<label>公司名称：</label>
							<span>{{ verificationInfo.company_name || '未填写' }}</span>
						</div>
						<div class="info-item">
							<label>法人代表：</label>
							<span>{{ verificationInfo.legal_person || '未填写' }}</span>
						</div>
						<div class="info-item">
							<label>营业执照：</label>
							<span>{{ verificationInfo.business_license || '未填写' }}</span>
						</div>
					</el-card>
				</el-col>

				<!-- 证件信息 -->
				<el-col :span="12" v-if="verificationInfo.verification_type === 'personal'">
					<el-card class="info-card">
						<template #header>
							<div class="card-header">
								<i class="el-icon-picture"></i>
								<span>证件信息</span>
							</div>
						</template>
						<div class="info-item">
							<label>身份证正面：</label>
							<span v-if="verificationInfo.id_card_front">
								<el-button text type="primary" @click="previewImage(verificationInfo.id_card_front)">查看图片</el-button>
							</span>
							<span v-else>未上传</span>
						</div>
						<div class="info-item">
							<label>身份证背面：</label>
							<span v-if="verificationInfo.id_card_back">
								<el-button text type="primary" @click="previewImage(verificationInfo.id_card_back)">查看图片</el-button>
							</span>
							<span v-else>未上传</span>
						</div>
					</el-card>
				</el-col>
			</el-row>

			<el-row :gutter="20" v-if="verificationInfo" style="margin-top: 20px;">
				<!-- 审核信息 -->
				<el-col :span="24">
					<el-card class="info-card">
						<template #header>
							<div class="card-header">
								<i class="el-icon-s-check"></i>
								<span>审核信息</span>
							</div>
						</template>
						<el-row :gutter="20">
							<el-col :span="8">
								<div class="info-item">
									<label>审核状态：</label>
									<el-tag :type="getStatusType(verificationInfo.status)">
										{{ getStatusText(verificationInfo.status) }}
									</el-tag>
								</div>
							</el-col>
							<el-col :span="8">
								<div class="info-item">
									<label>审核时间：</label>
									<span>{{ verificationInfo.audit_time ? formatTime(verificationInfo.audit_time) : '未审核' }}</span>
								</div>
							</el-col>
							<el-col :span="8">
								<div class="info-item">
									<label>审核管理员：</label>
									<span>{{ verificationInfo.audit_admin_id || '未审核' }}</span>
								</div>
							</el-col>
						</el-row>
						<div class="info-item" v-if="verificationInfo.audit_remark">
							<label>审核备注：</label>
							<span>{{ verificationInfo.audit_remark }}</span>
						</div>
						<div class="info-item">
							<label>创建时间：</label>
							<span>{{ verificationInfo.created_at }}</span>
						</div>
						<div class="info-item">
							<label>更新时间：</label>
							<span>{{ verificationInfo.updated_at }}</span>
						</div>
					</el-card>
				</el-col>
			</el-row>
		</div>

		<template #footer>
			<el-button @click="closed">关闭</el-button>
		</template>
	</el-dialog>
</template>

<script>
	export default {
		name: 'verificationDetail',
		data() {
			return {
				dialogVisible: false,
				loading: false,
				verificationInfo: null
			}
		},
		methods: {
			open(data) {
				this.verificationInfo = data
				this.dialogVisible = true
				return this
			},
			previewImage() {
				// 这里可以实现图片预览功能
				this.$alert('图片预览功能', '提示', { type: 'info' })
			},
			getStatusType(status) {
				const statusMap = {
					'pending': 'warning',
					'approved': 'success',
					'rejected': 'danger'
				}
				return statusMap[status] || 'info'
			},
			getStatusText(status) {
				const statusMap = {
					'pending': '待审核',
					'approved': '已通过',
					'rejected': '已拒绝'
				}
				return statusMap[status] || '未知'
			},
			formatTime(timestamp) {
				if (!timestamp) return '未设置'
				const date = new Date(timestamp * 1000)
				return date.toLocaleString()
			},
			closed() {
				this.dialogVisible = false
				this.verificationInfo = null
				this.$emit('closed')
			}
		}
	}
</script>

<style scoped>
	.verification-detail {
		min-height: 400px;
	}

	.info-card {
		margin-bottom: 0;
	}

	.card-header {
		display: flex;
		align-items: center;
		font-weight: bold;
		color: #409EFF;
	}

	.card-header i {
		margin-right: 8px;
		font-size: 16px;
	}

	.info-item {
		display: flex;
		margin-bottom: 12px;
		align-items: center;
	}

	.info-item label {
		width: 100px;
		font-weight: bold;
		color: #606266;
		flex-shrink: 0;
	}

	.info-item span {
		flex: 1;
		color: #303133;
		word-break: break-all;
	}
</style>
